<!DOCTYPE html>
<!--

// Copyright 2011 Traceur Authors.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

-->
<html>
<head>
<title>Traceur</title>
<script>
if (location.host === 'traceur-compiler.googlecode.com') {
  location.replace('http://google.github.io/traceur-compiler/demo/repl.html' +
      location.hash);
}
</script>
<link rel="stylesheet" href="../third_party/codemirror2/lib/codemirror.css">
<script src="../third_party/codemirror2/lib/codemirror.js"></script>
<script src="../third_party/codemirror2/mode/javascript/javascript.js"></script>
<script src="../bin/traceur.js"></script>
<style>

@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono|Droid+Sans);

html, body {
  margin: 0;
}

.CodeMirror-scroll {
  border: 1px solid #ddd;
  height: auto;
  min-height: 300px;
}

.output-wrapper {
  position: absolute;
  right: 0;
  top: 0;
}

html.hide-output .output-wrapper {
  display: none;
}

.CodeMirror {
  width: -webkit-calc(50% - 15px);
  width: calc(50% - 15px);
}

html.hide-output .CodeMirror {
  width: -webkit-calc(100% - 20px);
  width: calc(100% - 20px);
}

textarea,
pre,
.CodeMirror {
  font: 12px 'Droid Sans Mono', sans-serif;
  margin: 10px;
}

.error {
  color: red;
}

.option-button {
  background: black;
  border: 0;
  border-bottom-left-radius: 5px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  color: white;
  font: 13px/20px 'Droid Sans', sans-serif;
  height: 25px;
  margin: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.options {
  background: black;
  border-radius: 5px 0 5px 5px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  color: white;
  font: 13px/20px 'Droid Sans', sans-serif;
  padding: 10px;
  position: absolute;
  right: 0;
  top: 20px;
}

.options label {
  display: block;
}

.options label > input {
  vertical-align: -2px;
  margin: 0 1ex 0 0;
}

.options hr {
  background: white;
  border: 0;
  height: 1px;
}

.god0 {
  color: red;
  -webkit-transition:color 1s ease-in-out;
  transition: color 1s ease-in-out;
}

.god1 {
  color: yellow;
  -webkit-transition: color 1s ease-in-out;
  transition: color 1s ease-in-out
}

</style>
</head>
<body>
<textarea class="input"></textarea>
<pre class="error"></pre>
<pre class="eval"></pre>

<textarea class="output"></textarea>
<pre class="source-map"></pre>
<button class="option-button">Options</button>
<div class="options" hidden>
<label><input class="eval" type="checkbox" checked>Evaluate</label>
<label><input class="output" type="checkbox" checked>Show generated code</label>
<label><input class="show-all-toggle" type="checkbox">Show all options</label>
<hr>
<div class="traceur-options"></div>
<button class="all-on">All Options On</button>
<button class="all-off">All Options Off</button>
</div>

<script>
(function() {
  'use strict';

  var LoaderHooks = traceur.modules.LoaderHooks;
  var url = window.location.href;
  var loaderHooks = new LoaderHooks(new traceur.util.ErrorReporter(), url);
  var loader = new traceur.modules.Loader(loaderHooks);
  loader.import('./repl-module');
})();

</script>
</body>
</html>
